<template>
	<a-layout>
		<a-layout-sider class="sider" width="250">
			<a-tree  v-model:selectedKeys="selectedKeys"
				 key="" :tree-data="treeData" :defaultExpandAll="true"
				@select="onSelect" v-if="treeData.length > 0">
			</a-tree>
		</a-layout-sider>
		<a-layout>
			<a-layout-content>
				<div style="padding-left: 100px;">
					<!-- <a-typography-title :level="2">{{ optName }}</a-typography-title> -->
				</div>
				<div style="padding-left: 100px; padding-top: 15px;">
					<a-button type="primary" @click="fun_addChildren(treeKey)" :disabled="btn_disabled">
						<template #icon>
							<plus-outlined />
						</template>
						添加子级菜单
					</a-button>
					<a-button type="primary" @click="fun_addBrother(treeKey)" style="margin-left: 10px;">
						<template #icon>
							<plus-outlined />
						</template>
						添加平级菜单
					</a-button>
					<a-button type="primary" @click="fun_del(treeKey)" danger style="margin-left: 10px;">
						<template #icon>
							<delete-outlined />
						</template>
						删除
					</a-button>
				</div>
				<div style="width: 600px; margin-top: 20px;">
					<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" @finish="onFinish">

						<a-form-item label="菜单id">
							<a-input v-model:value="formState.menu_id" disabled />
						</a-form-item>
						<a-form-item label="菜单层级">
							<a-input v-model:value="formState.menu_level" disabled />
						</a-form-item>
						<a-form-item label="父级pid" name="menu_pid" :rules="[{ required: true, message: '父级pid必填!' }]">
							<a-input v-model:value="formState.menu_pid" />
						</a-form-item>
						<a-form-item label="菜单名称" name="menu_name" :rules="[{ required: true, message: '菜单名称必填!' }]">
							<a-input v-model:value="formState.menu_name" />
						</a-form-item>
						<a-form-item label="菜单地址" name="menu_url" :rules="[{ required: true, message: '菜单地址必填!' }]">
							<a-input v-model:value="formState.menu_url" />
						</a-form-item>
						<a-form-item label="图标">
							<a-input v-model:value="formState.menu_icon" />
						</a-form-item>

						<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
							<a-button type="primary" html-type="submit"> 提 交 </a-button>
						</a-form-item>
					</a-form>
				</div>
			</a-layout-content>
		</a-layout>
	</a-layout>
</template>

<script>
var columns = [
	{ title: '自增id', dataIndex: 'menu_id', iskey: true, add: false, edit: false, defaultVlue: 0, },
	{ title: '菜单层级', dataIndex: 'menu_level', iskey: false, add: true, edit: true, defaultVlue: 1, },
	{ title: '菜单父ID', dataIndex: 'menu_pid', iskey: false, add: true, edit: true, defaultVlue: 0, },
	{ title: '菜单名称', dataIndex: 'menu_name', iskey: false, add: true, edit: true, defaultVlue: '', },
	{ title: '菜单地址', dataIndex: 'menu_url', iskey: false, add: true, edit: true, defaultVlue: '', },
	{ title: '图标', dataIndex: 'menu_icon', iskey: false, add: true, edit: true, defaultVlue: '', },
];

export default {
	components: {},
	data() {
		return {
			labelCol: { style: { width: '100px' } },
			selectedKeys:[],
			treeData: [],
			formState: {},
			node: {},
			btn_disabled: true,
			optName: "编辑",
			columns: columns,
			idName: 'menu_id',
			pidName: 'menu_pid',
			levelName: 'menu_level',
		};
	},
	mounted() {
		this.fun_getData();
		this.fun_Init();
	},
	methods: {
		fun_getData() {
			var that = this;
			that.$http.post('/manage/SystemMenu/GetListTree', {}, that, function (ret) {
				that.treeData = ret.Data;
			});
		},
		fun_Init() {
			var that = this;
			that.formState = {};
			that.columns.forEach((elem, index) => {
				that.formState[elem.dataIndex] = elem.defaultVlue;
			});
		},
		onSelect(selectedKeys, event) {
			this.optName = "编辑";
			this.node = event.node;
			this.fun_Select(this.node);
		},
		fun_Select(node) {
			this.optName = "编辑";
			this.columns.forEach((elem, index) => {
				this.formState[elem.dataIndex] = node[elem.dataIndex];
			});
			this.btn_disabled = (node[this.levelName] > 1);
		},
		fun_addChildren() {
			var that = this;
			this.optName = "添加子级";

			this.formState = {};
			this.formState[this.idName] = 0;
			this.formState[this.pidName] = this.node[this.idName];
			this.formState[this.levelName] = this.node[this.levelName] + 1;
		},
		fun_addBrother() {
			var that = this;
			this.optName = "添加平级";

			this.formState = {};
			this.formState[this.idName] = 0;
			this.formState[this.pidName] = this.node[this.pidName];
			this.formState[this.levelName] = this.node[this.levelName];
		},
		fun_del(treeKey) {
			alert("del-" + treeKey);
		},
		onFinish() {
			var that = this;
			if (this.formState.menu_id > 0) {
				that.$http.post('/manage/SystemMenu/Update', that.formState, that, function (ret) {
					that.fun_getData();
					that.$Message["success"]({ background: true, duration: 1, content: "请求成功" });
				});
			}
			else {
				that.$http.post('/manage/SystemMenu/Insert', that.formState, that, function (ret) {
					that.fun_getData();
					that.$Message["success"]({ background: true, duration: 1, content: "请求成功" });
				});
			}
		},
	},
};
</script>

<style scoped>
.sider
{
	height: calc(100vh - 48px);
	background: #fff;
}
</style>